<template>
  <view class="notice">
    <view class="main">
      <view class="list">
        <view class="time">2019-07-26 14:47:28</view>
        <view class="text">
          <view class="title">公告标题公告标题公告标题公告标题公告标题</view>
          <view class="msg">公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题</view>
          <view class="more">查看更多 >></view>
        </view>
      </view>
      <view class="list">
        <view class="time">2019-07-26 14:47:28</view>
        <view class="text">
          <view class="title">公告标题公告标题公告标题公告标题公告标题</view>
          <view class="msg">公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题公告标题</view>
          <view class="more">查看更多 >></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }
  }
}
</script>

<style lang="less" scoped>
.notice {
  .main {
    position: absolute;
    top: 80rpx;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 20rpx;

    .list {
      font-size: 30rpx;
      .time {
        color: #999999;
        text-align: center;
        line-height: 114rpx;
      }
      .text {
        background: #fff;
        border-radius: 20rpx;
        margin: 0 31rpx;
        padding: 0 15rpx;
        box-shadow: 5rpx 0 30rpx rgba(225, 225, 225, 0.93);
        .title {
          line-height: 92rpx;
          text-align: center;
          border-bottom: 1rpx solid #e1e1e1; /*no*/
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .msg {
          font-size: 28rpx;
          line-height: 52rpx;
          color: #666;
          margin: 30rpx 0;
          text-indent: 56rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .more {
          border-top: 1rpx solid #e1e1e1; /*no*/
          font-size: 26rpx;
          color: #999999;
          text-align: center;
          padding: 35rpx 29rpx;
        }
      }
    }
  }
}
</style>
